<template>
  <div class="warp">
    <div class="head">
      <b class="b">设计大咖</b><span class="sp">加入我们|月入八万不是梦</span><span class="sa"><router-link
          to="/home/threeIndex">加入我们</router-link></span>
    </div>
    <div class="slide_card_box">
      <div class="slide_card" ref="box">
        <div class="slide_item">
          <img class="img" src="../assets/image/1.webp" alt="" />
          <img class="img" src="../assets/image/2.webp" alt="" />
          <img class="img" src="../assets/image/3.webp" alt="" />
          <img class="img" src="../assets/image/4.webp" alt="" />
          <img class="img" src="../assets/image/5.webp" alt="" />
          <img class="img" src="../assets/image/6.webp" alt="" />
          <img class="img" src="../assets/image/7.webp" alt="" />
          <img class="img" src="../assets/image/8.webp" alt="" />
        </div>
      </div>
      <button v-show="leftShow" class="left" @click="gotoleft">
        <el-icon size="15" color="black">
          <ArrowLeft />
        </el-icon>
      </button>
      <button v-show="rightShow" class="right" @click="gotoright">
        <el-icon size="15" color="black">
          <ArrowRight />
        </el-icon>
      </button>
    </div>

    <div class="foot">
      <div class="foott">
        <p><img src="../assets/image/20.jpg" alt="" /></p>
        <span>全球1000强，中国100强网站</span>
        <div class="mu">
          <dl class="dl">
            <dt>
              <h5>700亿+</h5>
            </dt>
            <dd>
              <h5>作品传播次数</h5>
            </dd>
          </dl>
          <dl class="dl">
            <dt>
              <h5>3亿+</h5>
            </dt>
            <dd>
              <h5>累计作品数</h5>
            </dd>
          </dl>
          <dl class="dl">
            <dt>
              <h5>6500万+</h5>
            </dt>
            <dd>
              <h5>累计注册用户</h5>
            </dd>
          </dl>
          <dl class="dl">
            <dt>
              <h5>100万+</h5>
            </dt>
            <dd>
              <h5>正版模板素材</h5>
            </dd>
          </dl>
          <dl class="dl">
            <dt>
              <h5>3000+</h5>
            </dt>
            <dd>
              <h5>安全运行天数</h5>
            </dd>
          </dl>
        </div>
      </div>
      <div class="auto">
        <table class="tab">
          <tr>
            <th>产品矩阵</th>
            <th>创意工具</th>
            <th>灵感交流</th>
            <th>服务帮助</th>
            <th>合作伙伴</th>
            <th>公司信息</th>
            <th>社交媒体</th>
          </tr>
          <tr>
            <td>H5</td>
            <td>红包</td>
            <td>用户社区</td>
            <td>审核社区</td>
            <td>设计师招募</td>
            <td>关于我们</td>
            <td>微信公众号</td>
          </tr>
          <tr>
            <td>海报</td>
            <td>打赏</td>
            <td>创意课堂</td>
            <td>作品审核</td>
            <td>合伙人招募</td>
            <td>人才招募</td>
            <td>官方微博</td>
          </tr>
          <tr>
            <td>长页</td>
            <td>短信通知</td>
            <td>客户案例</td>
            <td>网站地图</td>
            <td>正版素材商</td>
            <td>公司动态</td>
            <td>视频号</td>
          </tr>
          <tr>
            <td>表单</td>
            <td>二维码美化</td>
            <td>精选推荐</td>
            <td>热门模板</td>
            <td>内容中心</td>
            <td>荣誉奖项</td>
          </tr>
          <tr>
            <td>互动</td>
            <td>智能抠图</td>
            <td>热门作品</td>
            <td>客服中心</td>
            <td>内容安全审核</td>
            <td>商务合作</td>
          </tr>
          <tr>
            <td>视频</td>
            <td>文字云</td>
            <td>营销日历</td>
            <td>帮助中心</td>
          </tr>
          <tr>
            <td>电子画册</td>
            <td>拼图</td>
            <td></td>
            <td>隐私协议</td>
          </tr>
          <tr>
            <td>秀站</td>
            <td>智能海报</td>
          </tr>
          <tr>
            <td></td>
            <td>一键快闪</td>
          </tr>
        </table>
      </div>
      <div class="rightt">
        <p class="po">
          <img class="imgg" src="../assets/image/21.jpg" alt="" /><span>手机APP</span>
        </p>
        <p style="text-align: center">扫码注册 3分钟做出好设计</p>
        <p class="qrcode">
          <span class="top-left"></span>
          <span class="top-right"></span>
          <span class="bottom-left"></span>
          <span class="bottom-right"></span>
          <qrcode-vue class="qrc" :value="value" :level="level" :render-as="renderAs" />
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import QrcodeVue, { Level, RenderAs } from 'qrcode.vue'
import { onMounted, ref } from 'vue';

const box = ref(null)
let tagDomObj: any = null
let newWidth = 0
let leftShow = ref(false)
let rightShow = ref(true)

onMounted(() => {
  // 获取dom节点对象
  tagDomObj = box.value;
})

const gotoleft = () => {
  rightShow.value = true
  const minWidth = 0
  newWidth = newWidth - tagDomObj.children[0].clientWidth * 9
  if (newWidth <= minWidth) {
    newWidth = minWidth
    leftShow.value = false
  }
  const newScrollstup = newWidth
  tagDomObj.style.transform = `translateX(${-newScrollstup}px)`
}

const gotoright = () => {
  leftShow.value = true
  const maxWidth = tagDomObj.clientWidth - tagDomObj.children[0].clientWidth * 2
  newWidth = newWidth + tagDomObj.children[0].clientWidth * 2
  if (newWidth >= maxWidth) {
    newWidth = maxWidth
    rightShow.value = false
  }
  const newScrollstup = newWidth
  tagDomObj.style.transform = `translateX(${-newScrollstup}px)`
}


const value = ref('qrcode')
const level = ref<Level>('M')
const renderAs = ref<RenderAs>('svg')
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.warp {
  width: 100%;
  height: 100%;
}

.b {
  font-size: 25px;
  font-weight: 700;
}

.sp {
  color: #ccc;
  margin-left: 5px;
}

.sa {
  position: absolute;
  right: 50px;
}

.img {
  width: 236px;
  height: 132px;
  margin: 10px;
}

.slide_card_box {
  width: 100%;
  height: 160px;
  overflow: hidden;
  position: relative;
}

.slide_card {
  width: 4500px;
  height: 200px;
  transition: transform 0.5s ease-out;
}

.slide_item {
  float: left;
  margin-left: 20px;
}

/* .slide_item:hover {
  box-shadow: 0px 5px 10px 0px #ccc;
  transition: transform 0.5s ease-out;
} */

.slide_card_box .left,
.slide_card_box .right {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #fff;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide_card_box .left {
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
}

.slide_card_box .right {
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

.slide_card_box .left:hover,
.slide_card_box .right:hover {
  background: #1261ff;
}
  .el-icon {
    color: #fff;
  }


.foot {
  width: 100%;
  height: 100%;
  margin-top: 10px;
}

.foott {
  width: 300px;
  height: 300px;
  float: left;
}

.dl {
  width: 150px;
  height: 30px;
  float: left;
  font-weight: 800;
  font-size: 15px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
}

.auto {
  width: 1103px;
  height: 300px;
  float: left;
}
.rightt {
  width: 180px;
  height: 300px;
  float: right;
}

.imgg {
  width: 30px;
  height: 30px;
  margin-left: 5px;
}

.po {
  font-weight: 700;
  font-size: 18px;
  margin-left: 10px;
  color: #000;
}

.qrcode {
  text-align: center;
  margin-left: 15px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
  position: relative;
  border: 1px solid #ccc;
}

.top-left {
  position: absolute;
  left: -1px;
  top: -1px;
  padding: 10px;
  border-style: solid;
  border-color: blue;
  border-width: 1px 0 0 1px;
}

.top-right {
  position: absolute;
  right: -1px;
  top: -1px;
  padding: 10px;
  border-style: solid;
  border-color: blue;
  border-width: 1px 1px 0 0;
}

.bottom-left {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 10px;
  border-style: solid;
  border-color: blue;
  border-width: 0 1px 1px 0;
}

.bottom-right {
  position: absolute;
  left: -1px;
  bottom: -1px;
  padding: 10px;
  border-style: solid;
  border-color: blue;
  border-width: 0 0 1px 1px;
}

.qrc {
  margin-top: 25px;
}

.tab {
  width: 100%;
  height: 300px;
  text-align: center;
}

th {
  font-size: 15px;
  font-weight: 700;
}

td:hover {
  color: #1261FF;
}
</style>
